<template>
	<view class="levelOne">
		<view class="flex alignCenter font14 colorBlue">
			<view class="focusMargin">学科门类</view>
			<text>》</text>
			<view class="focusMargin">一级学科</view>
			<text v-if="operType>=2">》</text>
			<view class="focusMargin" v-if="operType>=2">库名</view>
			<text v-if="operType>=3">》</text>
			<view class="focusMargin" v-if="operType>=3">章名</view>
			<text v-if="operType>=3">》</text>
		</view>
		<view class="flex alignCenter name justConBetween">
			<view class="flex alignCenter">
				<image src="@/static/image/toolbox/edit.png" mode="widthFix"></image>
				<input class="font14" v-model.trim="name" maxlength="10" type="text" placeholder="取个名字吧(10字符内)">
			</view>
			<view class="noWidthBtn" @click.stop="sureNameClick">确定</view>
		</view>
		<view class="flex tip">
			<image src="@/static/image/setting/cat.png" mode="widthFix"></image>
			<view class="font14 color999">建议选择以下公共名字，可进入知识区块链，让更多的用户看到：</view>
		</view>
		<view class="font14 flex alignCenter flexWrap nameTags">
			<view>库名qfwgwewgw1</view><view>库名sddvs</view><view>库名safsdfsf</view><view>库名sdvsdvsdv</view>
		</view>
		<!-- 判断是否有相同的名字 -->
		<uni-samename ref="nameRef" :nameArr="sameNameArr" @nameSureClick="nameSureClick"></uni-samename>
	</view>
</template>

<script>
	import uniSamename from "@/pages/send/components/uni-samename/uni-samename.vue"
	export default {
		components:{
			uniSamename,
		},
		data() {
			return {
				name:'',
				operType:'',
				editId:'',
				sameNameArr:[{
					title:'卡是分开',
					choose:false
				},{
					title:'深刻的女款',
					choose:false
				},{
					title:'数量的接口',
					choose:false
				},{
					title:'里是否健康',
					choose:false
				}],
			};
		},
		onLoad(option) {
			this.operType=option.type || ''
			this.editId=option.id || ''
		},
		methods:{
			// 用于编辑库、章、节
			getDetail(){
				
			},
			sureNameClick(){
				if(!this.name){
					uni.showToast({
						title:'请先输入名字',
						icon:'none'
					})
					return
				}
				this.$nextTick(()=>{
					this.$refs.nameRef.show()
				})
			},
			nameSureClick(name){
				this.name=name.title
			}
		}
	}
</script>

<style lang="scss" scoped>
.levelOne{
	padding: 30rpx;
	box-sizing: border-box;
	.colorBlue{
		margin:0 0 20rpx 0;
	}
	.tip{
		margin:20rpx 0;
		image{
			width: 72rpx;
			height: 72rpx;
		}
	}
}
.name{
	border:1px solid $bordercolor;
	border-radius: 8rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	&>.flex{
		flex:1;
	}
	image{
		width: 48rpx;
		height: 48rpx;
		margin:0 10rpx 0 0;
	}
	input{
		height: 96rpx;
		line-height: 96rpx;
		flex:1
	}
	.noWidthBtn{
		flex-shrink: 0;
	}
}
.nameTags{
	&>view{
		margin:0 20rpx 20rpx 0;
	}
}
</style>
